<template>
  <div ref="chart" class="gm-bar" style="width: 100%; height: 100%" />
</template>
<script>
export default {
  name: "GmBar",
  props: {
    data: {
      type: Array,
      default: function () {
        return [];
      },
    },
    title: {
      type: String,
      default: "",
    },
    color: {
      type: String,
      default: "#38b7b5",
    },
    titleSize: {
      type: String,
      default: "",
    },
    isRandomColor: {
      type: Boolean,
      default: false,
    },
    options: {
      type: Object,
      default: function () {
        return {};
      },
    },
  },
  data() {
    return {
      colorList: [
        "#516b91",
        "#59c4e6",
        "#edafda",
        "#93b7e3",
        "#a5e7f0",
        "#cbb0e3",
      ],
      defaultOptions: {
        tooltip: {
          trigger: "axis",
          formatter: "{b} : {c}",
          axisPointer: {
            type: "shadow",
          },
        },
        legend: {
          top: "10%",
        },
        grid: { y: 15, y2: 20, x: 50, x2: 10 },
        yAxis: [
          {
            type: "value",
            splitLine: {
              show: false,
            },
            minInterval: 1,
            axisLabel: {
              textStyle: {
                color: "#fff",
              },
            },
          },
        ],
        xAxis: [
          {
            type: "category",
            splitLine: {
              show: false,
            },
            axisLabel: {
              //轴文字标签
              show: true,
              textStyle: {
                color: "#fff",
              },
            },
            data: [],
          },
        ],
        series: [
          {
            type: "bar",
            barWidth: "40%",
            barMaxWidth: "50px",
            itemStyle: {},
            data: [],
          },
        ],
      },
      myOptions: {},
    };
  },
  watch: {},
  mounted() {
    this.initChart();
    this.$once("hook:beforeDestroy", () => {
      // 销毁图表实例，避免内存溢出
      if (this.myChart) this.destroyInstance();
    });
  },
  methods: {
    initChart() {
      this.myChart = this.$echarts && this.$echarts.init(this.$refs.chart);
      this.myOptions = this.defaultOptions;
      if (this.options && JSON.stringify(this.options) !== "{}") {
        for (const i in this.options) {
          this.myOptions[i] = this.options[i];
        }
      } else {
        if (this.data && this.data.length !== 0) {
          const xData = [];
          const yData = [];
          this.data.forEach((e) => {
            xData.push(e.name);
            yData.push(e.value);
          });
          this.myOptions.xAxis[0].data = xData;
          this.myOptions.series[0].data = yData;
        }

        if (this.isRandomColor) {
          // 是否随机颜色
          const randomColor = this.colorList[Math.floor(Math.random() * 5)];
          this.myOptions.series[0].itemStyle.color = randomColor;
        } else {
          this.myOptions.series[0].itemStyle.color = () => {
            return this.color;
          };
        }
        if (this.title) {
          if (this.titleSize) {
            this.myOptions.title = {
              text: this.title,
              left: "center",
              textAlign: "auto",
              textStyle: {
                fontSize: this.titleSize,
              },
            };
          } else {
            this.myOptions.title = {
              text: this.title,
              left: "center",
              textAlign: "auto",
            };
          }
          this.myOptions.grid.top = 60;
        }
      }

      this.myChart && this.myChart.setOption(this.myOptions);
      this.myChart &&
        this.myChart.on("click", (params) => {
          this.$emit("click", params);
        });
    },
    resizeHandle() {
      this.myChart.resize();
    },
    destroyInstance() {
      this.myChart.dispose();
      this.myChart = null;
      window.removeEventListener("resize", this.resizeHandle);
    },
  },
};
</script>
<style lang="scss" scoped></style>
